import './discountEdit.scss';
import { useEffect, useState } from 'react';
import { parserDate } from '../../../../../utils/setTime'
import {
    Breadcrumb,
    DatePicker,
    Form,
    Input,
    Radio,
    Checkbox,
    Button,
    Space,
    Table,
    Select,
    Divider,
    Modal
} from 'antd';
import { useLocation } from 'react-router-dom';
import moment from 'moment'
const DiscountAdd = () => {
    //创建form实例
    const [addForm] = Form.useForm()
    let location = useLocation()
    //跳转回显数据
    let editData = location.state.editDatas
    editData.endTime = parserDate(editData.endTime)
    editData.startTime = parserDate(editData.startTime)
    addForm.setFieldsValue(editData)
    console.log(editData);
    //表格条数
    const showTotal = (total) => `数量 ${total} 条`;
    //上部分的
    const { RangePicker } = DatePicker;
    const { TextArea } = Input;
    const FormDisabledDemo = () => {
        const [componentDisabled, setComponentDisabled] = useState(true);
        const onFormLayoutChange = ({ disabled }) => {
            setComponentDisabled(disabled);
        };
    }
    //多选框
    const onChange = (e) => {
        console.log(e.target.checked);
    };
    const changeval = (v, record) => {
        console.log(v.target.value);
        let _data = [...data]
        for (let i = 0; i < _data.length; i++) {
            if (_data[i].key == record.key) {
                _data[i].discount = v.target.value
            }
        }
        setDate(_data)
    }
    //下部分数据
    const [data, setDate] = useState([
        {
            key: '1',
            name: '',
            money: 100,
            discount: '',
            discountMoney: '',
        },
        {
            key: '2',
            name: '',
            money: 100,
            discount: '',
            discountMoney: '',
        },
        {
            key: '3',
            name: '',
            money: 100,
            discount: '',
            discountMoney: '',
        },
    ])
    //下部分表头
    const columns = [
        {
            title: '商品信息',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            render: (_, record) => (
                <div className='divImg'>
                    <div></div>
                    <div>
                        <div>西班牙语0-B2高级直达</div>
                        <div>库存:9</div>
                    </div>
                </div>
            ),
        },
        {
            title: '原价 (元)',
            dataIndex: 'money',
            key: 'money',
            align: 'center',
        },
        {
            title: '折扣',
            dataIndex: 'discount',
            key: 'discount',
            align: 'center',
            render: (_, record) => (
                <Input placeholder='请输入' style={{ marginLeft: '1%' }} value={record.discount} onChange={(e) => {
                    changeval(e, record)
                }}></Input>
            ),
        },
        {
            title: '折扣 (元)',
            key: 'discountMoney',
            dataIndex: 'discountMoney',
            align: 'center',
            render: (_, record) => (
                <Input placeholder='请输入' style={{ marginLeft: '1%' }} ></Input>
            ),
        },
        {
            title: '操作',
            key: 'operation',
            dataIndex: 'operation',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="link">删除</Button>
                </Space>
            ),
        },
    ];

    //获取form表单数据

    //查询确定
    const onFinish = (values) => {
        let addData = addForm.getFieldsValue()
        console.log(addData);
    };
    const onFinishFailed = (values) => {

    };
    //获取时间
    const getChange = (data, dateString) => {
        console.log(dateString);
    }
    const RadioChange = (e) => {
        console.log(e.target.value);
    }
    //弹框表头
    const adDcolumns = [
        {
            title: '商品信息',
            dataIndex: 'name',
            key: 'name',
            align: 'center',

        },
        {
            title: '价格 (元)',
            dataIndex: 'money',
            key: 'money',
            align: 'center',
        },
        {
            title: '库存',
            dataIndex: 'stock',
            key: 'stock',
            align: 'center',
        },
        {
            title: '销量',
            key: 'sales',
            dataIndex: 'sales',
            align: 'center',
        }
    ];
    //弹框数据
    const adDdata = [
        {
            key: '1',
            name: '头发',
            money: 100,
            stock: 500,
            sales: 700,
        },
        {
            key: '2',
            name: '脑壳',
            money: 100,
            stock: 500,
            sales: 700,
        },

    ];
    //弹框表格方法
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };
    const [selectionType, setSelectionType] = useState('checkbox');
    //弹框表单方法
    //创建弹框表单实例
    const [PopoutForm] = Form.useForm()
    //弹框条数
    const showTotals = (total) => `数量 ${total} 条`;
    //弹框显示隐藏
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };
    //单框点击确定
    const handleOk = (v) => {
        console.log(v);
        setIsModalVisible(false);
    };
    //弹框表单
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //input验证
    const PopoutFinish = (v) => {
        let PopoutData = PopoutForm.getFieldsValue()
        console.log(PopoutData);
    }
    //弹框充值
    const PopoutFailed = () => {

    }
    //选择类别
    const changeClass = (v) => {
        console.log(v);
    }
    return (
        <div className='AddBox'>
            <div className='divPre'>
                <Breadcrumb>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>限时折扣</Breadcrumb.Item>
                    <Breadcrumb.Item>新建折扣活动</Breadcrumb.Item>
                </Breadcrumb>
                <h2>新建折扣互动</h2>
            </div>
            <div>

                <Form labelCol={{ span: 4, }}
                    wrapperCol={{ span: 14, }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    initialValues={{
                        editData
                    }}
                    autoComplete="off"
                    layout="horizontal"
                    form={addForm}
                // onValuesChange={onFormLayoutChange}
                >
                    <div className='divContent'>
                        <div style={{ paddingTop: '20px' }}>基础信息</div>
                        <Form.Item label="活动名称" name='eventName'>
                            <Input placeholder='请输入' style={{ width: '400px' }} />
                        </Form.Item>
                        <Form.Item label="活动日期" style={{ marginBottom: 0 }} >
                            <Form.Item style={{ display: 'inline-block', width: 'calc(30% - 12px)' }} >
                                <DatePicker onChange={getChange} name='startTime' defaultValue={moment(editData.endTime)} />
                            </Form.Item>
                            <span style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}>
                                至
                            </span>
                            <Form.Item style={{ display: 'inline-block', width: 'calc(60% - 12px)' }}>
                                <DatePicker onChange={getChange} defaultValue={moment(editData.startTime)} />
                            </Form.Item>
                        </Form.Item>

                        <Form.Item label="优惠券叠加" name='discountId'>
                            <Radio.Group onChange={RadioChange}>
                                <Radio value={1} style={{ display: 'block' }}>不可叠加</Radio>
                                <Radio value={2} style={{ paddingTop: '10px' }}> 可叠加其他类型的优惠 </Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="促销抹零">
                            <Checkbox onChange={onChange}>抹零</Checkbox>
                        </Form.Item>
                        <Form.Item label="商品限购" >
                            <Radio.Group onChange={RadioChange}>
                                <Radio value={3} style={{ display: 'block' }}>不限购</Radio>
                                <Radio value={4} style={{ paddingTop: '5px' }}>最多购买</Radio>
                            </Radio.Group>
                            <Form.Item style={{ display: 'inline-block', width: '150px' }} name='getPiece' >
                                <Input addonAfter="件" placeholder='请输入' />
                            </Form.Item>
                        </Form.Item>
                        <Form.Item label="划线价" style={{ marginTop: '20px', paddingBottom: '30px' }}>
                            <Checkbox onChange={onChange}>显示划线价</Checkbox>
                        </Form.Item>
                    </div>

                    <div className='divNext' >
                        <div className='NextTit'>
                            <span>折扣商品列表</span>
                            <Button type="primary" onClick={showModal}>+ 添加商品</Button>
                        </div>
                        <Table columns={columns} dataSource={data} pagination={{
                            total: data.length,
                            showTotal: showTotal,
                            showSizeChanger: true,
                            showQuickJumper: true,
                        }} />
                        <Form.Item className='NextFeature'>
                            <Button type="primary" htmlType="submit">提交 </Button>
                            <Button onClick={onFinishFailed}>返回</Button>
                        </Form.Item>
                    </div>
                    <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width='1000px' footer="" >
                        <div className='PopoutBox'>
                            <Form
                                onFinish={PopoutFinish}
                                onFinishFailed={PopoutFailed}
                                autoComplete="off"
                                layout="horizontal"
                                form={PopoutForm}
                            >
                                <div className='PopoutTit'>选择商品</div>
                                <Divider />
                                <div className='PopoutContent'>
                                    <div className='PopoutIn' >
                                        <div style={{ marginRight: '20px' }}>全部分类</div>
                                        <Form.Item style={{ margin: '0 auto', marginRight: '20px' }}>
                                            <Select style={{ width: '200px' }} placeholder='请选择商品分类' onChange={changeClass}>
                                                <Select.Option value={1}>分类1</Select.Option>
                                                <Select.Option value={2}>分类2</Select.Option>
                                                <Select.Option value={3}>分类3</Select.Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item style={{ margin: '0 auto' }} name='Popouts'>
                                            <Input style={{ width: '200px' }} placeholder='请输入' ></Input>
                                        </Form.Item>
                                    </div>
                                    <div>
                                        <Button type="primary" htmlType="submit" style={{ marginRight: '20px' }}> 查询</Button>
                                        <Button>重置</Button>
                                    </div>
                                </div>
                                <Table rowSelection={{ type: selectionType, ...rowSelection, }}
                                    columns={adDcolumns} dataSource={adDdata}
                                    style={{ width: '96%', margin: '0 auto' }}
                                    pagination={{
                                        total: adDdata.length, showTotals: showTotals,
                                        showSizeChanger: true, showQuickJumper: true,
                                    }} >

                                </Table>
                                <div className='location'>
                                    <Button style={{ marginRight: '20px' }} onClick={handleCancel}> 取消</Button>
                                    <Button type="primary" htmlType="submit" onClick={handleOk}>确认</Button>
                                </div>
                            </Form>
                        </div>
                    </Modal>
                </Form>
            </div>

        </div >
    )
}
export default DiscountAdd;